<script lang="ts" setup>
import { useConfigStore } from "@/store/config";

definePage({
  style: {
    navigationBarTitleText: "角色选择",
    navigationStyle: "custom",
  },
});
const navHeight = ref(0);
const configStore = useConfigStore();
navHeight.value = configStore.systemBarHeight;

const role = ref("1");

function gotoSelectSchool() {
  configStore.switchRole(role.value);
  if (role.value === "1") {
    uni.navigateTo({
      url: `/pages-sub/student/selectSchool?showBack=false`,
    });
  } else {
    uni.navigateTo({
      url: `/pages-fg/login/login`,
    });
  }
}
</script>

<template>
  <view class="role-layout">
    <wd-navbar
      title="选择你的身份"
      placeholder
      left-arrow
      :style="{ marginTop: `${navHeight}px` }"
    />

    <wd-radio-group v-model="role" size="large" class="sub-layout">
      <view class="item-layout">
        <wd-radio value="1" shape="dot">
          <view class="radio">
            <image src="/static/images/parent.png" class="h-100px w-100px" />
            <view class="title"> 家长 </view>
          </view>
        </wd-radio>
      </view>
      <view class="item-layout" mt-20>
        <wd-radio value="2" shape="dot">
          <view class="radio">
            <image src="/static/images/teacher.png" class="h-100px w-100px" />
            <view class="title"> 教师 </view>
          </view>
        </wd-radio>
      </view>
    </wd-radio-group>
    <view class="flex-center">
      <wd-button
        type="primary"
        size="large"
        class="confirm"
        @click="gotoSelectSchool"
      >
        确定
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.role-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.flex-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 70%;
}
.sub-layout {
  margin-top: 20%;
  width: calc(100vw - 88rpx);
}
.item-layout {
  width: 100%;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 10px;
  margin: 20rpx 24rpx 0px 24rpx;
}
.radio {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title {
  width: 50%;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: #000000;
  font-weight: normal;
}
.confirm {
  width: 80%;
  border-radius: 10px;
}
</style>
